<template>
  <div class="app-container">

    <div class="card-wrap flex-column justify-end card-padding">

      <div class="card-title-wrap">
        <span>{{pageTitle}}</span>
        <span></span>
      </div>

      <el-form ref="form" :rules="1==form.customerTypeCode?rules1:rules2" :model="form" label-width="80px" label-position="top">

        <el-row :gutter="30">

          <el-col :span="8">
            <el-form-item label="客户类型:" prop="customerTypeCode">

              <el-radio-group :disabled="saveFlag==1" v-model="form.customerTypeCode">
                <template v-for="dict in dict.type.customer_type">
                  <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户标签:" prop="customerLabel">
              <el-select @change="customerLabelChange" filterable v-model="form.customerLabel" clearable style="width: 100%">
                <template v-for="dict in dict.type.customer_label">
                  <el-option :label="dict.label" :value="dict.label" :key="dict.label"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户属性:" prop="customerPropertyCode">

              <el-radio-group v-model="form.customerPropertyCode">
                <template v-for="dict in dict.type.customer_property">
                  <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                </template>
              </el-radio-group>

            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item prop="customerLevelCode">

              <template slot="label">
                <span>客户等级:</span>
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content">
                    <div v-if="form.businessScopeCode!=3">
                      自营：<br />
                      <div style="margin-left: 10px">
                        A：世界500强及绝对控股公司且控股比例大于51%（含）；中国500强及绝对控股公司且控股比例大于51%（含）；央企及绝对控股公司且控股比例大于51%（含），大型企事业单位；主板上市公司及绝对控股公司且控股比例大于51%（含）；韩国企业（仅限银行、航空企业）在华机构，韩国政府在华分支机构/代表处<br />

                        B：世界500强持股公司；中国500强持股公司；央企/大型企事业单位持股企业，地方政府持股企业；主板上市公司持股企业；韩国企业在华机构；创业板/科创板上市公司<br />

                        C：个人控股小微韩企；具有核心竞争优势民营企业<br />

                        D：新客户成立时间五年以上的公司；与我司合作六个月以上且无当前债权<br />
                      </div>
                    </div>
                    <div v-if="form.businessScopeCode!=2">
                      渠道：<br />
                      <div style="margin-left: 10px">
                        A：世界500强企业及其控股、持股公司，央企及其控股、持股公司，主板上市公司及其控股、持股公司，中国500强企业，各级政府机关，县级以上事业单位；在我司企业评级制度中评定为A类企业的中层以上管理人员、我集团公司任职一年以上的员工。<br />

                        B：非世界500强日本企业在华分支机构/代表处及其控股、持股公司；成立三年以上的非上述范围内的企业，但非C类中所涉及的行业；年满22周岁（含），不满65周岁的中国公民，且非现役军人、藏维等非汉语少数民族。<br />

                        C：成立三年以上的汽车租赁公司、汽车融资租赁公司、汽车维修与服务公司、小贷公司、担保公司等。<br />
                      </div>
                    </div>
                  </div>
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </template>

              <el-radio-group v-model="form.customerLevelCode">
                <template v-for="dict in dict.type.customer_level">
                  <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="业务范围:" prop="businessScopeCode">

              <el-radio-group v-model="form.businessScopeCode">
                <template v-for="dict in dict.type.business_scope">
                  <el-radio :label="dict.value">{{ dict.label }}</el-radio>
                </template>
              </el-radio-group>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户名称:" prop="customerName">
              <el-input maxlength="50" v-model="form.customerName" clearable placeholder="请输入客户名称"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系方式:" prop="customerPhone">
              <!--                            @blur="form.customerPhone=$event.target.value"-->
              <el-input type="text" @input="value=>form.customerPhone=value.replace(/[^\d]/g,'')" :maxlength="12" v-model="form.customerPhone" placeholder="请输入联系方式">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="1==form.customerTypeCode">
            <el-form-item label="客户工作单位:" prop="customerWorkPlace">
              <el-input maxlength="50" v-model="form.customerWorkPlace" clearable placeholder="请输入客户工作单位"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="1==form.customerTypeCode">
            <el-form-item label="客户住址:" prop="customerAddr">
              <el-input maxlength="50" v-model="form.customerAddr" clearable placeholder="请输入客户住址"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="1==form.customerTypeCode">
            <el-form-item label="客户职业:" prop="customerWork">
              <el-input maxlength="50" v-model="form.customerWork" clearable placeholder="请输入客户职业"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="1==form.customerTypeCode">
            <el-form-item label="客户职务:" prop="customerWorkDuties">
              <el-input maxlength="50" v-model="form.customerWorkDuties" clearable placeholder="请输入客户职务"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="主营业务:" prop="customerPrimaryBusiness">
              <el-input maxlength="500" v-model="form.customerPrimaryBusiness" clearable placeholder="请输入主营业务"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="统一信用代码:" prop="customerUscc">
              <el-input @input="value=>form.customerUscc=value.replace(/[^\w_]/g, '')" maxlength="18" :disabled="creditDisable" v-model="form.customerUscc" clearable placeholder="请输入统一信用代码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="经营地址:" prop="customerBusinessAddr">
              <el-input maxlength="50" v-model="form.customerBusinessAddr" clearable placeholder="请输入经营地址"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="法定代表人:" prop="customerResponsibleName" :rules="[
                                        {
                                            required: 3==form.customerLevelCode,
                                            message: '请输入法定代表人',
                                            trigger: 'blur',
                                            validator: (rule, value, callback) => validData(rule, form.customerResponsibleName, callback)
                                        }
                                    ]">
              <el-input maxlength="50" v-model="form.customerResponsibleName" clearable placeholder="请输入法定代表人"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item :label="2==form.customerTypeCode?'法人证件类型':'证件类型'" prop="identityTypeCode" :rules="[
                                        {
                                            required: 3==form.customerLevelCode || 4==form.customerLevelCode,
                                            message: '请选择证件类型',
                                            trigger: 'change',
                                            validator: (rule, value, callback) => validData(rule, form.identityTypeCode, callback)
                                        }
                                    ]">

              <el-select filterable v-model="form.identityTypeCode" clearable style="width: 100%">
                <template v-for="dict in dict.type.identity_type">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item :label="2==form.customerTypeCode?'法人证件号码':'证件号码'" prop="identityNumber" :rules="[
                            {
                                required: 3==form.customerLevelCode || 4==form.customerLevelCode,
                                message: '请输入证件号码',
                                trigger: 'blur',
                                validator: (rule, value, callback) => validData(rule, form.identityNumber, callback)
                            }, { pattern:
                                1==form.identityTypeCode?/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/:
                                2==form.identityTypeCode?/^([A-Z]\d{6,10}(\(\w{1}\))?)$/:
                                3==form.identityTypeCode?/^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/:
                                4==form.identityTypeCode?/^([a-zA-z]|[0-9]){5,17}$/
                                :null
                            , message: '请输入正确的证件号码', trigger: 'blur' }
                        ]">
              <el-input @input="value=>form.identityNumber=value.replace(/[^\w_]/g, '')" maxlength="30" :disabled="idDisable" v-model="form.identityNumber" clearable placeholder="请输入证件号码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="传真:" prop="customerMail">
              <el-input @input="value=>form.customerMail=value.replace(/[^\w-]/g, '')" maxlength="30" v-model="form.customerMail" clearable placeholder="请输入传真"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="电子邮箱:" prop="customerFax">
              <el-input maxlength="50" v-model="form.customerFax" clearable placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系人1:" prop="primaryContact">
              <el-input maxlength="50" v-model="form.primaryContact" clearable placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系人1联系方式:" prop="primaryContactPhone">
              <el-input maxlength="12" @input="value=>form.primaryContactPhone=value.replace(/[^\d]/g,'')" v-model="form.primaryContactPhone" clearable placeholder="请输入联系人1联系方式"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="1==form.customerTypeCode">
            <el-form-item label="与客户关系:" prop="primaryContactIdentity">
              <el-input maxlength="50" v-model="form.primaryContactIdentity" clearable placeholder="请输入与客户关系"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="联系人职务:" prop="primaryContactWorkDuties">
              <el-input maxlength="50" v-model="form.primaryContactWorkDuties" clearable placeholder="请输入联系人职务"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系人2:" prop="secondaryContact">
              <el-input maxlength="50" v-model="form.secondaryContact" clearable placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="联系人2联系方式:" prop="secondaryContactPhone">
              <el-input maxlength="12" @input="value=>form.secondaryContactPhone=value.replace(/[^\d]/g,'')" v-model="form.secondaryContactPhone" clearable placeholder="请输入联系人2联系方式"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="联系人职务:" prop="secondaryContactWorkDuties">
              <el-input maxlength="50" v-model="form.secondaryContactWorkDuties" clearable placeholder="请输入联系人职务"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="1==form.customerTypeCode">
            <el-form-item label="与客户关系:" prop="secondaryContactIdentity">
              <el-input maxlength="50" v-model="form.secondaryContactIdentity" clearable placeholder="请输入与客户关系"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="客户类别:" prop="customerTypeSelect" :rules="[
                                        {
                                            required: true,
                                            message: '请选择客户类别',
                                            trigger: 'change',
                                            validator: (rule, value, callback) => validData(rule, form.customerTypeSelect, callback)
                                        }
                                    ]">
              <el-select filterable v-model="form.customerTypeSelect" clearable style="width: 100%">
                <template v-for="dict in dict.type.basic_classification_customers">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>

            </el-form-item>
          </el-col>

<!--          <el-col :span="8" v-show="1==form.customerTypeCode">-->
<!--            <div style="width: 100%;height: 80px"></div>-->
<!--          </el-col>-->

          <!--                    <el-col :span="8">-->
          <!--                        <el-form-item label="账户帐号:" prop="bankAccountName">-->
          <!--                            <el-input v-model="form.bankAccountName" clearable-->
          <!--                                      placeholder="请输入开户行帐号"></el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->

          <!--                    <el-col :span="8">-->
          <!--                        <el-form-item label="账户开户行:" prop="bankName">-->
          <!--                            <el-input v-model="form.bankName" clearable placeholder="请输入银行名称"></el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->

          <!--                    <el-col :span="1==form.customerTypeCode?16:0" style="height: 80px"></el-col>-->

          <el-col :span="8">
            <el-form-item label="上传证件图片:" prop="identityFrontImg" class="form-img">

              <div class="flex">
                <ImageCommon info="证件正面" @input="imageChange($event, 1)" :limit="1" v-model="form.identityFrontImg"></ImageCommon>
                <ImageCommon info="证件反面" :limit="1" v-model="form.identityBackImg"></ImageCommon>
              </div>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上传驾驶证:" prop="driverLicenseFrontImg" class="form-img">

              <div class="flex">
                <ImageCommon info="驾驶证正面" :limit="1" @input="imageChange($event, 2)" v-model="form.driverLicenseFrontImg"></ImageCommon>
                <ImageCommon info="驾驶证反面" :limit="1" v-model="form.driverLicenseBackImg"></ImageCommon>
              </div>

            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="2==form.customerTypeCode">
            <el-form-item label="上传营业执照:" prop="businessLicenseFrontImg" class="form-img">

              <div class="flex">
                <ImageCommon info="营业执照正面" :limit="1" @input="imageChange($event, 3)" v-model="form.businessLicenseFrontImg"></ImageCommon>
              </div>

            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="附件上传:" prop="annex">
              <ImageCommon :up-type="2" info="选择附件" v-model="form.annex"></ImageCommon>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </div>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="cancel">取消</el-button>
      <el-button :loading="buttonLoading" v-if="saveFlag!=1" type="primary" plain @click="submitForm(0)">暂存</el-button>
      <el-button :loading="buttonLoading" type="primary" @click="submitForm(1)">保存</el-button>
    </div>

  </div>
</template>

<script>
import { customerAdd, customerDetail, customerUpdate, recognitionIdCard, recognitionBusinessLicense, recognitionDrivingLicense } from "@/api/memberManage/memberList";


export default {
  name: "memberAdd",
  dicts: ['customer_type', 'basic_classification_customers', 'business_scope', 'customer_level', 'customer_property', 'customer_source', 'customer_label', 'identity_type'],
  data() {
    return {
      idDisable: false,
      creditDisable: false,
      saveFlag: -1,
      buttonLoading: false,
      form: {
        customerTypeCode: '1',
        customerTypeSelect: '0202',
        // identityFrontImg:'123',
        // identityBackImg:'123',
        // driverLicenseFrontImg:'123',
        // driverLicenseBackImg:'123',
        // businessLicenseFrontImg:'123',
      },
      rules1: {
        customerTypeCode: [
          {
            required: true,
            message: '请选择客户类型',
            trigger: 'change'
          }
        ],
        customerLabel: [
          {
            required: true,
            message: '请选择客户标签',
            trigger: 'change'
          }
        ],
        customerPropertyCode: [
          {
            required: true,
            message: '请选择客户属性',
            trigger: 'change'
          }
        ],
        // customerLevelCode: [
        //     {
        //         required: true,
        //         message: '请选择客户等级',
        //         trigger: 'change'
        //     }
        // ],
        businessScopeCode: [
          {
            required: true,
            message: '请选择业务范围',
            trigger: 'change'
          }
        ],
        customerName: [
          {
            required: true,
            message: '请输入客户名称',
            trigger: 'blur'
          }
        ],
        customerPhone: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: 'blur'
          }, { pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '联系方式格式不正确', trigger: 'blur' }
        ],
        primaryContact: [
          {
            required: true,
            message: '请输入联系人1',
            trigger: 'blur'
          }
        ],
        primaryContactPhone: [{
          required: true,
          pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/,
          message: '联系方式格式不正确',
          trigger: 'blur'
        }
        ],
        secondaryContactPhone: [{
          pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/,
          message: '联系方式格式不正确',
          trigger: 'blur'
        }
        ],
        customerMail: [
          { pattern: /^\d{1,3}-\d{1,3}-\d{4}$/, message: '传真格式不正确', trigger: 'blur' }
        ],
        customerFax: [
          {
            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ],
        identityTypeCode: [
          {
            required: true,
            message: '请选择证件类型',
            trigger: 'change'
          }
        ],
        identityNumber: [
          {
            required: true,
            message: '请输入证件号码',
            trigger: 'blur'
          }
        ],
        bankAccountName: [
          {
            required: true,
            message: '请输入账户帐号',
            trigger: 'blur'
          }, { pattern: /^[1-9]\d{11,19}$/, message: '请输入正确的银行账户', trigger: 'blur' }
        ],
        bankName: [
          {
            required: true,
            message: '请输入账户开户行',
            trigger: 'blur'
          }
        ],
        // identityFrontImg: [
        //     {
        //         required: true,
        //         message: '请上传身份证',
        //         trigger: 'change'
        //     }
        // ],
        // driverLicenseFrontImg: [
        //     {
        //         required: true,
        //         message: '请上传驾驶证',
        //         trigger: 'change'
        //     }
        // ],
      },

      rules2: {
        customerTypeCode: [
          {
            required: true,
            message: '请选择客户类型',
            trigger: 'change'
          }
        ],
        customerLabel: [
          {
            required: true,
            message: '请选择客户标签',
            trigger: 'change'
          }
        ],
        customerPropertyCode: [
          {
            required: true,
            message: '请选择客户属性',
            trigger: 'change'
          }
        ],
        customerLevelCode: [
          {
            required: true,
            message: '请选择客户等级',
            trigger: 'change'
          }
        ],
        businessScopeCode: [
          {
            required: true,
            message: '请选择业务范围',
            trigger: 'change'
          }
        ],
        customerName: [
          {
            required: true,
            message: '请输入客户名称',
            trigger: 'blur'
          }
        ],
        customerPhone: [
          {
            required: true,
            message: '请输入联系方式',
            trigger: 'blur'
          }, { pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '联系方式格式不正确', trigger: 'blur' }
        ],
        primaryContact: [
          {
            required: true,
            message: '请输入联系人1',
            trigger: 'blur'
          }
        ],
        primaryContactPhone: [{
          required: true,
          pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/,
          message: '联系方式格式不正确',
          trigger: 'blur'
        }
        ],
        secondaryContactPhone: [{
          pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/,
          message: '联系方式格式不正确',
          trigger: 'blur'
        }
        ],
        customerMail: [
          { pattern: /^\d{1,3}-\d{1,3}-\d{4}$/, message: '传真格式不正确', trigger: 'blur' }
        ],
        customerFax: [
          {
            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ],
        customerUscc: [
          {
            required: true,
            message: '请输入统一信用代码',
            trigger: 'blur'
          }, {
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: '请输入18位数字或大写字母'
          }
        ],
        identityTypeCode: [
          {
            required: true,
            message: '请选择证件类型',
            trigger: 'change'
          }
        ],
        identityNumber: [
          {
            required: true,
            message: '请输入证件号码',
            trigger: 'blur'
          }
        ],
        // bankAccountName: [
        //     {
        //         required: true,
        //         message: '请输入账户帐号',
        //         trigger: 'blur'
        //     }
        // ],
        // bankName: [
        //     {
        //         required: true,
        //         message: '请输入账户开户行',
        //         trigger: 'blur'
        //     }
        // ],
        // identityFrontImg: [
        //     {
        //         required: true,
        //         message: '请上传身份证',
        //         trigger: 'change'
        //     }
        // ],
        // driverLicenseFrontImg: [
        //     {
        //         required: true,
        //         message: '请上传驾驶证',
        //         trigger: 'change'
        //     }
        // ],
        businessLicenseFrontImg: [
          {
            required: true,
            message: '请上传营业执照',
            trigger: 'change'
          }
        ],
      },
      pageTitle:null
    };
  },
  watch: {
    '$route': {
      handler(val) {
        console.log('this.$route', this.$route)

        if (val && val.name == this.$options.name) {
          if (this.$route.query && this.$route.query.customerId && !this.$route.query.tabClick) {
            this.getOldData(this.$route.query.customerId)
          } else if (!this.$route.query.tabClick) {
            this.form = {
              customerTypeCode: '1',
              customerTypeSelect: '0202',
            }
          }



          const title = this.$route?.query?.pageType ?? '客户'
          this.pageTitle = title
          const route = Object.assign({}, this.$route, { title: `${title}` })
          this.$store.dispatch('tagsView/updateVisitedView', route)
        }
      },
      immediate: true,
      deep: true
    }
  },
  // mounted() {
  //     console.log('==>', this.$route.query)
  //     if (this.$route.query && this.$route.query.customerId) {
  //         this.getOldData(this.$route.query.customerId)
  //     }
  //
  //     const title =  this.$route?.query?.pageType??'客户'
  //     const route = Object.assign({}, this.$route, { title: `${title}` })
  //     this.$store.dispatch('tagsView/updateVisitedView', route)
  //
  // },
  methods: {
    customerLabelChange(val) {
      let find = this.dict.type.customer_label.find(item => val == item.label);

      if (find) {
        this.form.customerLabelCode = find.value;
      } else {
        this.form.customerLabelCode = null;
      }
    },

    imageChange(url, type) {
      if (!url) {
        return
      }
      let that = this
      //1身份证  2驾驶证   3营业执照
      if (type == 1 && (1 == this.form.identityTypeCode || this.form.identityTypeCode === undefined || this.form.identityTypeCode === null || this.form.identityTypeCode === '')) {
        //识别身份证
        this.buttonLoading = true;
        recognitionIdCard({
          ossId: url,
          idCardSide: 'front',
        }).then(res => {
          if (res.code == '200') {
            for (const dataKey in res.data) {
              if (res.data[dataKey] != undefined && res.data[dataKey] != null && res.data[dataKey] != '') {
                // that.form[dataKey] = res.data[dataKey]
                that.$set(that.form, dataKey, res.data[dataKey])
              }
            }
            that.$forceUpdate();
          } else {
            // that.form.identityFrontImg = null
          }
        }).catch(e => {
          // that.form.identityFrontImg = null
        }).finally(f => {
          this.buttonLoading = false;
        })
      } else if (type == 2) {
        //识别驾驶证
        this.buttonLoading = true;
        recognitionDrivingLicense({
          ossId: url,
          idCardSide: 'front'
        }).then(res => {
          if (res.code == '200') {
            for (const dataKey in res.data) {
              if (res.data[dataKey] != undefined && res.data[dataKey] != null && res.data[dataKey] != '') {
                // that.form[dataKey] = res.data[dataKey]
                that.$set(that.form, dataKey, res.data[dataKey])
              }
            }
            that.$forceUpdate();
          } else {
            // that.form.driverLicenseFrontImg = null
          }
        }).catch(e => {
          // that.form.driverLicenseFrontImg = null
        }).finally(f => {
          this.buttonLoading = false;
        })
      } else if (type == 3) {
        //识别营业执照
        this.buttonLoading = true;
        recognitionBusinessLicense(url).then(res => {
          if (res.code == '200') {
            for (const dataKey in res.data) {
              if (res.data[dataKey] != undefined && res.data[dataKey] != null && res.data[dataKey] != '') {
                // that.form[dataKey] = res.data[dataKey]
                that.$set(that.form, dataKey, res.data[dataKey])
              }
            }
            that.$forceUpdate();
          } else {
            // that.form.businessLicenseFrontImg = null
          }
        }).catch(e => {
          // that.form.businessLicenseFrontImg = null
        }).finally(f => {
          this.buttonLoading = false;
        })
      }
    },
    validData(rule, value, callback) {
      // console.log('aaa', rule, value, callback)
      if (rule.required && !value) {
        // this.$modal.msgError(`未填写${value}`);
        callback(new Error(rule.message));
      } else {
        callback();
      }
    },
    cancel() {
      this.$router.back();
      this.$store.dispatch('tagsView/delView', this.$route);
    },
    getOldData(customerId) {
      customerDetail(customerId).then(res => {
        this.form = res.data

        this.saveFlag = res.data.saveFlag

        this.idDisable = this.saveFlag == 1 && 1 == this.form.customerTypeCode && (this.form.identityNumber !== undefined && this.form.identityNumber !== null && this.form.identityNumber !== '')
        this.creditDisable = this.saveFlag == 1 && 2 == this.form.customerTypeCode && (this.form.customerUscc !== undefined && this.form.customerUscc !== null && this.form.customerUscc !== '')

      })
    },
    commit() {
      let that = this
      this.buttonLoading = true;

      if (that.form.customerId) {
        customerUpdate(that.form).then(res => {
          this.buttonLoading = false;
          this.$modal.msgSuccess("提交成功");
          this.$router.back();
          this.$store.dispatch('tagsView/delView', this.$route);
        }).finally(e => {
          this.buttonLoading = false;
        })
      } else {
        customerAdd(that.form).then(res => {
          this.buttonLoading = false;
          this.$modal.msgSuccess("提交成功");
          this.$router.back();
          this.$store.dispatch('tagsView/delView', this.$route);
        }).finally(e => {
          this.buttonLoading = false;
        })
      }
    },
    submitForm(type) {
      let that = this

      console.log('that.form', that.form)
      that.form.saveFlag = type

      if (0 == type) {
        this.commit()
      } else if (1 == type) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.commit()
          }
        });
      }


      // this.$modal.confirmCenter( "确定提交？").then(() => {
      //   this.buttonLoading = true;
      //   return customerAdd(this.form)
      // }).then(() => {
      //   this.buttonLoading = false;
      //   this.getList();
      //   this.$modal.msgSuccess( "提交成功");
      // }).finally(() =>
      //   this.buttonLoading = false
      // )
    },
  }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
